import React, { Component } from "react";
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

import './login.less'
// import logo from '../../assets/images/logo.png'
import {login} from '../../api'
import memoryUtils from "../../utils/memoryUtils";

/**
 * 后台登录的路由组件
 */
export default class Login extends Component {
    onFinish = async (values) => {
        //console.log('Received values of form: ', values);
        
        const {username,password} = values;

        const response = await login(username,password)
        
        if(response.status === 0){
            message.success("登录成功")
            
            const user = response.data;
            memoryUtils.user = user;

            // 跳转到后台管理界面
            // console.log(this.props);
            this.props.history.replace("/");
        }else{
            message.error(response.msg)
        }
    };
    /**
     * 密码自定义验证
     */
    validatePwd = (rule, value, callback) => {
        if (!value) {
            callback("密码必须输入")
        } else if (value.length < 4) {
            callback("密码长度不能小于4位")
        } else if (value.length > 12) {
            callback("密码长度不能大于12位")
        } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
            callback("密码必须是英文、数字或下划线组成")
        } else {
            callback(); //验证通过
        }
    }
    render() {
        return (
            <div className="login">
                <header className="login-header">
                    {/* <img src="" alt="logo" /> */}
                    <h1>React全栈项目-后台管理系统</h1>
                </header>
                <section className="login-content">
                    <h2>用户登录</h2>
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                    >
                        <Form.Item
                            name="username"
                            // 声明式验证：直接使用别人定义好的验证规则进行验证
                            rules={[
                                { required: true, message: '用户名不能为空!' },
                                { min: 4, message: '用户名最少4位' },
                                { max: 12, message: '用户名最多12位' },
                                { pattern: /^[a-zA-Z0-9_]+$/, message: "用户名必须是字母数字下划线组成" }
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                { validator: this.validatePwd }
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>


                        <Form.Item>
                            <Button type="primary" htmlType="submit" size="large" className="login-form-button">
                                登录
                            </Button>

                        </Form.Item>
                    </Form>
                </section>
            </div>
        )
    }
}